import { Component, OnInit, Inject, OnDestroy } from "@angular/core";
import { LocaleService, TranslationService, Language } from "angular-l10n";
import { PLATFORM_ID, APP_ID } from "@angular/core";
import { isPlatformServer } from "@angular/common";

import {
  ISelectSymbolResponse,
  IMu,
  IZi,
  IQuerySymbol,
  IOnSymbol
} from "@/trade/store/models/trade";
import * as fromTrade from "@/trade/store/reducers/index";
import * as fromRoot from "@/reducers/index";
import { Store, select } from "@ngrx/store";
import { TradeActions } from "@/trade/store/actions";
import { map, filter } from "rxjs/operators";
import { Subscription, BehaviorSubject } from "rxjs";
import { ActivatedRoute } from "@angular/router";
import { Router, NavigationEnd } from "@angular/router";
import { takeUntil, mergeMap } from "rxjs/operators";
import { forkJoin, combineLatest } from "rxjs";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-panel-tv",
  templateUrl: "./panel-tv.component.html",
  styleUrls: ["./panel-tv.component.scss"]
})
export class PanelTvComponent implements OnInit, OnDestroy {
  @Language() lang: string;

  isServer: boolean;

  tv = {
    zi: {
      o: "393",
      h: "393",
      l: "393",
      c: "393",
      change: "393",
      v: "393",
      lastPrice: "0.33",
      symbol: "BTC"
    },
    mu: {
      symbol: "ETH"
    }
  };

  ttv: any;

  curLocale = null;

  onSymbol = {
    h: "0.0000",
    l: "0.0000",
    v: "0.0000",
    lastPrice: "0.0000",
    change: "0.00",
    symbol: "",
    sort: 0,
    isLove: false,
    type: "",
    mu: "",
    zi: ""
  };

  querySymbol: IQuerySymbol;

  symbolMap$ = this.store
    .pipe(select(fromRoot.symbolMap))
    .pipe(filter(symbolMap => !!symbolMap));

  sub$ = {
    defaultLocaleChanged$: null,
    queryParamsAndDefaultLocaleChanged$: null,
    symbolMapSub$: null
  };

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private activatedRoute: ActivatedRoute,
    @Inject("UtilsService") private utilsService,
    @Inject("SkService") private skService,
    public locale: LocaleService,
    private store: Store<fromTrade.State>
  ) {
    this.isServer = isPlatformServer(this.platformId);
    if (!this.isServer) {
      this.ttv = require("../../../../assets/tv/src/tv").default;
    }
  }

  ngOnInit() {
    this.addListen();
  }
  addListen() {
    this.sub$.queryParamsAndDefaultLocaleChanged$ = combineLatest(
      this.activatedRoute.queryParams,
      this.locale.defaultLocaleChanged
    ).subscribe(([query, locale]) => {
      const { symbol } = query;
      const querySymbol: IQuerySymbol = this.utilsService.splitQuerySymbol(
        symbol
      );
      if (!this.isServer) {
        let lang = "zh";
        switch (this.locale.getCurrentLocale()) {
          case "en-US":
            lang = "en";
            break;
          case "zh-CN":
            lang = "zh";
            break;
          case "de-DE":
            lang = "de_DE";
            break;
        }
        if (
          this.curLocale !== this.locale.getCurrentLocale() ||
          !this.ttv.hasIns()
        ) {
          this.ttv.init({
            symbol: `${querySymbol.zi}_${querySymbol.mu}`,
            skService: this.skService,
            locale: lang
          });
          this.curLocale = this.locale.getCurrentLocale();
          return;
        }
        this.ttv.setSymbol({ symbol: `${querySymbol.zi}_${querySymbol.mu}` });
      }
    });

    // 初始化 强行触发一波  有空 给作者提个 issue
    this.locale["sendDefaultLocaleEvents"]();

    this.sub$.symbolMapSub$ = combineLatest(
      this.symbolMap$,
      this.activatedRoute.queryParams
    ).subscribe(([symbolMap, query]) => {
      const { symbol } = query;
      this.querySymbol = this.utilsService.splitQuerySymbol(symbol);
      const onSymbol =
        symbolMap[`${this.querySymbol.zi}${this.querySymbol.mu}`];
      if (!!onSymbol) {
        this.onSymbol = onSymbol;
      }
    });
  }

  ngOnDestroy() {
    this.utilsService.unsub(this.sub$);
    this.ttv.destory();
  }
}
